﻿@{
    ViewData["Title"] = "Search";
}

<div class="normalheader transition animated fadeIn">
    <div class="hpanel">
        <div class="panel-body">
            <a class="small-header-action" href="">
                <div class="clip-header">
                    <i class="fa fa-arrow-up"></i>
                </div>
            </a>

            <div id="hbreadcrumb" class="pull-right m-t-lg">
                <ol class="hbreadcrumb breadcrumb">
                    <li><a href="index.html">Dashboard</a></li>
                    <li>
                        <span>App views</span>
                    </li>
                    <li class="active">
                        <span>Search view</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                Search view
            </h2>
            <small>Use search view to show search functionality.</small>
        </div>
    </div>
</div>

<div class="content animate-panel">

    <div class="row">
        <div class="col-md-3">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="m-b-md">
                        <h4>
                            Filters
                        </h4>
                        <small>
                            Filter your project basend on diferent options below.
                        </small>
                    </div>

                    <div class="form-group">
                        <label class="control-label">Project date:</label>
                        <div class="input-group date">
                            <input type="text" class="form-control" value="10/06/2016">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Project value:</label>
                        <div class="input-group">
                            <input id="demo1" type="text" name="demo1" value="50">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Client:</label>
                        <div class="input-group">
                            <select class="form-control m-b" name="account">
                                <option selected>Company and Brothers</option>
                                <option>Morgan & Morgan Inc.</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Employees</label>
                        <div class="input-group">
                            <input id="demo2" type="text" name="demo2" value="2">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Status:</label>
                        <div class="input-group">
                            <div class="checkbox checkbox-primary">
                                <input checked id="checkbox1" type="checkbox">
                                <label for="checkbox1">
                                    Completed
                                </label>
                            </div>
                            <div class="checkbox checkbox-success">
                                <input id="checkbox2" type="checkbox">
                                <label for="checkbox2">
                                    Pending
                                </label>
                            </div>
                            <div class="checkbox checkbox-success">
                                <input id="checkbox3" type="checkbox">
                                <label for="checkbox3">
                                    Cancel
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Tags:</label>
                        <div class="input-group">
                            <select class="select2" multiple="multiple">
                                <option selected value="Branding">Branding</option>
                                <option selected value="Website">Website</option>
                                <option selected value="Design">Design</option>
                                <option selected value="Ilustration">Ilustration</option>
                                <option selected value="New">New</option>
                                <option value="Important">Important</option>
                                <option value="External">External</option>
                            </select>
                        </div>
                    </div>

                    <button class="btn btn-success btn-block">Apply</button>

                </div>

            </div>

        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-lg-12">
                    <div class="hpanel">
                        <div class="panel-body">
                            <div class="input-group">
                                <input class="form-control" type="text" placeholder="Search projects..">
                                <div class="input-group-btn">
                                    <button class="btn btn-default"><i class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">

                <div class="col-lg-12">

                    <div class="hpanel filter-item">
                        <a href="#">
                            <div class="panel-body">
                                <div class="pull-right text-right">
                                    <small class="stat-label">Last week</small>
                                    <h4>$620,20 <i class="fa fa-level-up text-success"></i></h4>
                                </div>
                                <h4 class="m-b-xs">Desing project</h4>
                                <p class="small">Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still</p>
                            </div>
                        </a>
                    </div>

                    <div class="hpanel filter-item active">
                        <a href="#">
                            <div class="panel-body">
                                <div class="pull-right text-right">
                                    <small class="stat-label">Last week</small>
                                    <h4>$140,70 <i class="fa fa-long-arrow-right text-info"></i></h4>
                                </div>
                                <h4 class="m-b-xs">Project manager app</h4>
                                <p class="small">It is a long established fact that a reader will be distracted by the readable</p>
                            </div>
                        </a>
                    </div>

                    <div class="hpanel filter-item">
                        <a href="#">
                            <div class="panel-body">
                                <div class="pull-right text-right">
                                    <small class="stat-label">Last week</small>
                                    <h4>$580,90 <i class="fa fa-level-down text-danger"></i></h4>
                                </div>
                                <h4 class="m-b-xs">New branding</h4>
                                <p class="small">There are many variations of passages of Lorem Ipsum available, </p>
                            </div>
                        </a>
                    </div>

                    <div class="hpanel filter-item">
                        <a href="#">
                            <div class="panel-body">
                                <div class="pull-right text-right">
                                    <small class="stat-label">Last week</small>
                                    <h4>$170,20 <i class="fa fa-level-up text-warning"></i></h4>
                                </div>
                                <h4 class="m-b-xs">Website project</h4>
                                <p class="small">All the Lorem Ipsum generators on the Internet tend to repeat</p>
                            </div>
                        </a>
                    </div>

                    <div class="hpanel filter-item">
                        <a href="#">
                            <div class="panel-body">
                                <div class="pull-right text-right">
                                    <small class="stat-label">Last week</small>
                                    <h4>$240,70 <i class="fa fa-level-up text-success"></i></h4>
                                </div>
                                <h4 class="m-b-xs">Ilustration project</h4>
                                <p class="small">Making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words</p>
                            </div>
                        </a>
                    </div>

                    <div class="hpanel filter-item">
                        <a href="#">
                            <div class="panel-body">
                                <div class="pull-right text-right">
                                    <small class="stat-label">Last week</small>
                                    <h4>$620,20 <i class="fa fa-level-up text-success"></i></h4>
                                </div>
                                <h4 class="m-b-xs">Desing project</h4>
                                <p class="small">Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still</p>
                            </div>
                        </a>
                    </div>

                    <div class="hpanel filter-item">
                        <a href="#">
                            <div class="panel-body">
                                <div class="pull-right text-right">
                                    <small class="stat-label">Last week</small>
                                    <h4>$140,70 <i class="fa fa-long-arrow-right text-info"></i></h4>
                                </div>
                                <h4 class="m-b-xs">Project manager app</h4>
                                <p class="small">It is a long established fact that a reader will be distracted by the readable</p>
                            </div>
                        </a>
                    </div>

                    <div class="hpanel filter-item">
                        <a href="#">
                            <div class="panel-body">
                                <div class="pull-right text-right">
                                    <small class="stat-label">Last week</small>
                                    <h4>$580,90 <i class="fa fa-level-down text-danger"></i></h4>
                                </div>
                                <h4 class="m-b-xs">New branding</h4>
                                <p class="small">There are many variations of passages of Lorem Ipsum available, </p>
                            </div>
                        </a>
                    </div>

                    <div class="hpanel filter-item">
                        <a href="#">
                            <div class="panel-body">
                                <div class="pull-right text-right">
                                    <small class="stat-label">Last week</small>
                                    <h4>$170,20 <i class="fa fa-level-up text-warning"></i></h4>
                                </div>
                                <h4 class="m-b-xs">Website project</h4>
                                <p class="small">All the Lorem Ipsum generators on the Internet tend to repeat</p>
                            </div>
                        </a>
                    </div>

                    <div class="hpanel filter-item">
                        <a href="#">
                            <div class="panel-body">
                                <div class="pull-right text-right">
                                    <small class="stat-label">Last week</small>
                                    <h4>$240,70 <i class="fa fa-level-up text-success"></i></h4>
                                </div>
                                <h4 class="m-b-xs">Ilustration project</h4>
                                <p class="small">Making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words</p>
                            </div>
                        </a>
                    </div>

                    <div class="hpanel filter-item">
                        <a href="#">
                            <div class="panel-body">
                                <div class="pull-right text-right">
                                    <small class="stat-label">Last week</small>
                                    <h4>$620,20 <i class="fa fa-level-up text-success"></i></h4>
                                </div>
                                <h4 class="m-b-xs">Desing project</h4>
                                <p class="small">Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still</p>
                            </div>
                        </a>
                    </div>

                    <div class="hpanel filter-item">
                        <a href="#">
                            <div class="panel-body">
                                <div class="pull-right text-right">
                                    <small class="stat-label">Last week</small>
                                    <h4>$140,70 <i class="fa fa-long-arrow-right text-info"></i></h4>
                                </div>
                                <h4 class="m-b-xs">Project manager app</h4>
                                <p class="small">It is a long established fact that a reader will be distracted by the readable</p>
                            </div>
                        </a>
                    </div>

                    <div class="hpanel filter-item">
                        <a href="#">
                            <div class="panel-body">
                                <div class="pull-right text-right">
                                    <small class="stat-label">Last week</small>
                                    <h4>$580,90 <i class="fa fa-level-down text-danger"></i></h4>
                                </div>
                                <h4 class="m-b-xs">New branding</h4>
                                <p class="small">There are many variations of passages of Lorem Ipsum available, </p>
                            </div>
                        </a>
                    </div>

                    <div class="hpanel filter-item">
                        <a href="#">
                            <div class="panel-body">
                                <div class="pull-right text-right">
                                    <small class="stat-label">Last week</small>
                                    <h4>$170,20 <i class="fa fa-level-up text-warning"></i></h4>
                                </div>
                                <h4 class="m-b-xs">Website project</h4>
                                <p class="small">All the Lorem Ipsum generators on the Internet tend to repeat</p>
                            </div>
                        </a>
                    </div>




                </div>



            </div>


        </div>
    </div>


</div>

@section Styles {
    <environment names="Development,Staging,Production">
        <link rel="stylesheet" href="~/lib/select2/dist/css/select2.min.css" />
        <link rel="stylesheet" href="~/lib/select2-bootstrap-css/select2-bootstrap.min.css" />
        <link rel="stylesheet" href="~/lib/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css" />
        <link rel="stylesheet" href="~/lib/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css" />
        <link rel="stylesheet" href="~/lib/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
    </environment>
}

@section Scripts {
    <environment names="Development,Staging,Production">
        <script src="~/lib/select2/dist/js/select2.min.js"></script>
        <script src="~/lib/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js"></script>
        <script src="~/lib/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
    </environment>

    <script type="text/javascript">

        $(function () {

            $('.input-group.date').datepicker();

            $("#demo1").TouchSpin({
                min: 0,
                max: 100,
                step: 0.1,
                decimals: 2,
                boostat: 5,
                maxboostedstep: 10
            });

            $("#demo2").TouchSpin({
                verticalbuttons: true
            });

            $(".select2").select2();

        });

    </script>
}